<template>
    <view>
        <view class="buy-list" v-for="(row,index) in allGoodsList" :key="index" @click="navigateTo(row.id)">
            <view class="row">
                <view class="goods-info">
                    <view class="img">
                        <image :src="row.cover_info.url"></image>
                    </view>
                    <view class="info">
                        <view class="title">{{row.name}}</view>
                        <view class="spec">库存:{{row.number}}</view>
                        <view class="price-number">
                            <view class="price">￥{{row.price}}</view>
                        </view>
                        <view class="settlement">
                            <view class="pay"  @click.stop="goDelete(row.id, index)">删除</view>
                        </view>
                    </view>

                </view>
            </view>
        </view>


        <view class="loadmore">
            <uni-load-more :status="loadMoreStatus"></uni-load-more>
        </view>
    </view>
</template>

<script>
    import { goods } from '../../common/config'
    import uniLoadMore from "@/components/uni-load-more"
    import { mapState, mapMutations } from 'vuex'

    export default {
        components:{uniLoadMore},
        computed:{
            ...mapState(['userInfo']),
        },
        data() {
            return {
                allGoodsList:[],

                requestData:{
                    client_id:0,
                    page: 1,
                },
                loadMoreStatus:'more'
            };
        },
        created(){
            this.requestData.client_id = this.userInfo.id;
            this.loadData();
        },
        //上拉加载
        onReachBottom(){
            this.loadMoreStatus = 'loading';
            this.loadData()
        },
        methods: {
            //去到商品详情页
            navigateTo(goods_id){
                uni.navigateTo({
                    url:'/pages/goods/goods?id=' + goods_id
                })
            },
            /**
             * 删除
             */
            goDelete(goods_id,index){
                let that = this;
                uni.showModal({
                    title: '提示',
                    content: '确定删除该商品吗？',
                    success: (e)=>{
                        if(e.confirm){
                            that.goToDelete(goods_id, index);
                        }
                    }
                });
            },
            async goToDelete(goods_id, index){
                await this.$api.MyRequest(goods.DeleteGoods.url + goods_id, goods.DeleteGoods.method)
                    .then(res => {
                        this.allGoodsList.splice(index, 1);
                    })
                    .catch(err => {
                    })
            },
            async loadData() {
                await this.$api.MyRequest(goods.GetGoods.url, goods.GetGoods.method,this.requestData)
                    .then(res => {
                        if (res.data.length != 0) {
                            this.requestData.page = res.current_page + 1;
                            this.allGoodsList = this.allGoodsList.concat(res.data);
                            this.loadMoreStatus = 'more'
                        }
                        else {
                            this.loadMoreStatus = 'noMore'
                        }
                    })
                    .catch(err => {
                    })
            },
        }
    }
</script>

<style lang="scss">
    .uni-collapse::before{
        background: none;
    }
    .uni-collapse-cell::after{
        background: none;
    }
    .uni-collapse::after{
        background: none;
    }
    .uni-collapse-cell__content{
        height: auto!important;
    }
    .addr{
        width: 86%;
        padding: 20upx 3%;
        margin: 30upx auto 20upx auto;
        box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
        border-radius: 20upx;
        display: flex;
        .icon{
            width: 80upx;
            height: 80upx;
            display: flex;
            align-items: center;
            image{
                width: 60upx;
                height: 60upx;
            }
        }
        .tel-name{
            width: 100%;
            display: flex;
            font-size: 32upx;
            .tel{
                margin-left: 40upx;
            }
        }
        .addres{
            width: 100%;
            font-size: 26upx;
            color: #999;
        }
    }
    .buy-list{
        width: 86%;
        padding: 10upx 3%;
        margin: 30upx auto 20upx auto;
        box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
        border-radius: 20upx;
        .row{
            margin: 30upx 0;
            .goods-info{
                width: 100%;
                display: flex;
                .img{
                    width: 22vw;
                    height: 22vw;
                    border-radius: 10upx;
                    overflow: hidden;
                    flex-shrink: 0;
                    margin-right: 10upx;
                    image{
                        width: 22vw;
                        height: 22vw;
                    }
                }
                .info{
                    width: 100%;
                    height: 22vw;
                    overflow: hidden;
                    display: flex;
                    flex-wrap: wrap;
                    position: relative;
                    .title{
                        width: 100%;
                        font-size: 28upx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        // text-align: justify;
                        overflow: hidden;
                    }
                    .spec{
                        font-size: 22upx;
                        background-color: #f3f3f3;
                        color: #a7a7a7;
                        height: 40upx;
                        display: flex;
                        align-items: center;
                        padding: 0 10upx;
                        border-radius: 20upx;
                        margin-bottom: 20vw;
                    }
                    .price-number{
                        position: absolute;
                        width: 100%;
                        bottom: 0upx;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        font-size: 28upx;
                        height: 40upx;
                        .price{
                            color: #f06c7a;
                        }
                        .number{
                            display: flex;
                            justify-content: center;
                            align-items: center;

                        }
                    }
                }
            }
        }
    }
    .order{
        width: 86%;
        padding: 10upx 3%;
        margin: 30upx auto 20upx auto;
        box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
        border-radius: 20upx;
        .row{
            margin: 20upx 0;
            height: 40upx;
            display: flex;
            .left{
                font-size: 28upx;
            }
            .right{
                margin-left: 40upx;
                font-size: 26upx;
                color: #999;
                input{
                    font-size: 26upx;
                    color: #999;
                }
            }
        }
    }
    .blck{
        width: 100%;
        height: 100upx;
    }

        .settlement{
            width: 80%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 80upx;
            view{
                min-width: 120upx;
                height: 50upx;
                padding: 0 20upx;
                border-radius: 50upx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28upx;
                margin-left: 20upx;
            }
            .default{
                border: solid 1upx #ccc;
                color: #666;
            }
            .pay{
                border: solid 1upx #ec652f;
                color: #ec652f;
            }
            .sum{
                width: 50%;
                font-size: 28upx;
                margin-right: 10upx;
                display: flex;
                justify-content: flex-end;
                .money{
                    font-weight: 600;
                }
            }
        }

    .detail{
        width: 86%;
        padding: 10upx 3%;
        margin: 30upx auto 20upx auto;
        box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
        border-radius: 20upx;
        .row{
            height: 60upx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .nominal{
                font-size: 28upx;
            }
            .content{
                font-size: 26upx;
                color: #f06c7a;
            }
        }
    }
</style>
